<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="h-title">智能标校系统</div>
    </div>
    <!-- 内容区 -->
    <div class="tabs_content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="调平平台" name="tabone">
          <TabOne></TabOne>
        </el-tab-pane>
        <el-tab-pane label="靶标系统" name="tabwrj">
          <TabWrj></TabWrj>
        </el-tab-pane>
        <el-tab-pane label="校准计算" name="tabtwo">
          <TabTwo></TabTwo>
        </el-tab-pane>
        <el-tab-pane label="连接管理" name="tabthree">
            <TabThree></TabThree>
        </el-tab-pane>
<!--        <el-tab-pane label="4g交互" name="Tab4G">-->
<!--            <Tab4G></Tab4G>-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </div>

  </div>

</template>

<script>
import mixin from './mixin'
import TabOne from './components/tabone/index'
import TabWrj from './components/tabwrj/index'
import TabThree from './components/tabthree/index'
import TabTwo from './components/tabtwo/index'
// import Tab4G from './components/Tab4G/index'
export default {
  name: 'index',
  components: {
    TabOne,
    TabWrj,
    TabThree,
    TabTwo
    // Tab4G
  },
  mixins: [mixin],
  data() {
    return {
    }
  }

}
</script>
<style lang="scss">
@import "./mixins.scss";
.el-tabs {
  width: 100%;
  height: 100%;
}
.el-tabs__header {
  margin: 0 0 10px;
}
.el-tabs__content {
  width: 100%;
  height: calc(100% - 50px);
}
.el-tabs__item {
  color: #fff;
}

.el-tab-pane {
  width: 100%;
  height: 100%;
}

.el-tabs__nav-scroll {
  padding: 0 20px;
}
</style>
